﻿<%@ Page Title="" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true"
    CodeFile="MyMealPlans.aspx.cs" Inherits="MyMealPlans" %>

<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="Server">
    <script type="text/javascript" src="js/MealPlans.js"></script>
    <script type="text/javascript" src="js/draganddrop.js"></script>
    <script type="text/javascript" src="js/Grocery.js"></script>
    <script type="text/javascript" src="js/jquery-ui.js"></script>
    <script type="text/javascript" src="jquery/jRating.jquery.js"></script>
    <script type="text/javascript" src="js/share.js"></script>
    <script type="text/javascript" src="js/opendialogprint.js"></script>
    <script type="text/javascript" src="js/Ratio-0.4.0.min.js"></script>
    <script type="text/javascript" src="js/popup.js"></script>
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
    <script type="text/javascript">
        $(document).ready(function () {

            if ($.browser.msie) {
                if ($.browser.version < 11) {
                    alert('You are using IE browser with version is ' + $.browser.version.toString() + '! There are some functions will be run is not good, please upgrade IE version to 11 or above.');
                }
            }

            $('#hdRecipeId').val('');
            var paging = '<%=ConfigurationManager.AppSettings["paging"].ToString() %>';
            var pageno = 1;
            if (window.location.search != '') {
                var pageno = GetURLParameter('page');
            }
            var userid = '<%=Session["Userid"]%>';

            var sessionRecipeId = '<%=Session["sessionRecipeId"]%>';
            if (sessionRecipeId != '') {

                $('.beta').css('display', 'inherit');
                $('.grocerypanel').css('display', 'inherit');

                if (sessionRecipeId.indexOf(',') > -1) {
                    var recipe = sessionRecipeId.split(',');
                    $.each(recipe, function (key, recipeid) {
                        getRecipeUserDetailSession(recipeid, key, recipe.length);
                    });
                }
                else {
                    getRecipeUserDetailSession(sessionRecipeId, 0, 1);
                }
            }

            loadMealPlan(paging, pageno, userid, userid,0);
            BindMealPlanSuggestion();

            $('#imgSearch').click(function () {
                loadMealPlan(paging, pageno, userid, userid,1);
            });

            $('.li01').click(function () {
                //$('#leftpanel').width('70%');
                $('.beta').css('display', 'inherit');
                $('.grocerypanel').css('display', 'inherit');
                //                $('#mealplan').html("<div class='clearfix clear' style='width:100%' id='divGrocery'><div class='clearfix clear' style='width:100%; display:none' id='divGroceryRecipe'></div><div class='clearfix clear' style='width:100%; display:inherit' id='divGroceryDepart'></div></div>");
            });

            $('.btn_close').click(function () {
                //$('#leftpanel').width('100%');
                $('.beta').css('display', 'none');
                $('.grocerypanel').css('display', 'none');
            });

            $('#btn_clear').click(function () {
                $('#divGroceryRecipe').html('<div class="divMessage">Click +</br> or</br> drag a recipe here</div>');
                $('#divGroceryDepart').html('<div class="divMessage">Click +</br> or</br> drag a recipe here</div>');
                $('#divAdditionalDepart').html('');
                $('#hdRecipeId').val('');
                RemoveSession("sessionRecipeId");
            });

            $('.ul_radio li input').click(function () {
                var id = $(this).attr("id");
                if (id == "chkRecipeView") {
                    $('#divGroceryRecipe').css('display', 'inherit');
                    $('#divGroceryDepart').css('display', 'none');
                    $('#divAdditionalDepart').css('display', 'none');
                }
                else {
                    $('#divGroceryRecipe').css('display', 'none');
                    $('#divGroceryDepart').css('display', 'inherit');
                    $('#divAdditionalDepart').css('display', 'inherit');
                }
            });

            $('.input1').focusin(function () {
                $('#btnAdditional').removeAttr('disabled');
            });

            $('.input1').keypress(function (event) {
                if (event.which == 13) {
                    var value = $('.input1').val();
                    if (value != '') {
                        return AddAdditional();
                    }
                }
            });

            $('#inPutSearch').focusin(function () {
                $('#btnAdditional').attr('disabled', 'disabled');
            });

            $('#txtServing').focusout(function () {
                var serving = $('#txtServing').val();
                if (serving == '') serving = '0';
                if (isInteger(serving)) {
                    if (serving >= 0) {
                        var RecipeList = document.getElementById('hdRecipeId').value;
                        document.getElementById('hdRecipeId').value = '';
                        document.getElementById('hdIngredientDepart').value = '';
                        $('#divGroceryRecipe').html('');
                        $('#divGroceryDepart').html('');
                        CallRenderRecipeDepartView(RecipeList);
                    }
                    else {
                        $('#txtServing').val('');
                        alert('Serving must be greater than 0');
                    }
                }
                else {
                    $('#txtServing').val('');
                    alert('Please input value is number!');
                }
            });

            $('#txtServing').keypress(function (event) {
                if (event.which == 13) {
                    var serving = $('#txtServing').val();
                    if (serving == '') serving = '0';
                    if (isInteger(serving)) {
                        if (serving >= 0) {
                            var RecipeList = document.getElementById('hdRecipeId').value;
                            document.getElementById('hdRecipeId').value = '';
                            document.getElementById('hdIngredientDepart').value = '';
                            $('#divGroceryRecipe').html('');
                            $('#divGroceryDepart').html('');
                            CallRenderRecipeDepartView(RecipeList);
                        }
                        else {
                            $('#txtServing').val('');
                            alert('Serving must be greater than 0');
                        }
                    }
                    else {
                        $('#txtServing').val('');
                        alert('Please input value is number!');
                    }
                }
            });
        });

        function isInteger(n) {
            return !isNaN(n);
        }

        var departmentlist = '';
        var ingredientlist = '';

        function getRecipeUserDetailSession(recipeID,k,l) {
            var url = "";
            var data = "";
            url = "PIMService.asmx/getRecipeUserDetail";
            data = "{'recipeID':'" + recipeID + "'}";
            $.ajax({
                type: "POST",
                url: url,
                data: data,
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (response) {
                    var recipe = response.d;
                    var serving = $('#txtServing').val();
                    var ingredient = recipe.IngredientNameString;
                    var RecipeName = recipe.RecipeName;
                    var ser = recipe.Serving;
                    var recipeid = recipe.RecipeID;
                    var departname = recipe.DepartNameString;
                    if (departmentlist == '')
                        departmentlist = departname;
                    else
                        departmentlist = departmentlist + ',' + departname;

                    if (ingredientlist == '')
                        ingredientlist = ingredient;
                    else {
//                        if (ingredientlist.indexOf(ingredient) == -1)
                        //                            ingredientlist = ingredientlist + '|' + ingredient;
                        ingredientlist = ingredientlist + '|' + ingredient;
                    }
                    LoadGroceryUserRecipeView(ingredient, RecipeName, ser, recipeid, serving, departname);
                    if (k + 1 == l)
                        LoadGroceryUserDepartView(departmentlist, ingredientlist);
                },
                error: function (msg) { }
            });
        }

        function changeServing() {
            var serving = $('#txtServing').val();
            if (serving == '') serving = '0';
            if (isInteger(serving)) {
                if (serving >= 0) {
                    var RecipeList = document.getElementById('hdRecipeId').value;
                    document.getElementById('hdRecipeId').value = '';
                    document.getElementById('hdIngredientDepart').value = '';
                    $('#divGroceryRecipe').html('');
                    $('#divGroceryDepart').html('');
                    CallRenderRecipeDepartView(RecipeList);
                }
                else {
                    $('#txtServing').val('');
                    alert('Serving must be greater than 0');
                }
            }
            else {
                $('#txtServing').val('');
                alert('Please input value is number!');
            }
        }

        function SendEmail() {
            if (document.getElementById('<%=txtEmail.ClientID%>').value == '') {
                alert('Please input email address.');
                return false;
            }
            var email = document.getElementById('<%=txtEmail.ClientID%>').value;
            var body = '';

            var $newHTML;
            var $newHTML1;
            var departview = $('#divGroceryDepart').css('display');

            if (departview == 'none') {
                $newHTML = $('#divGroceryRecipe');
                $newHTML = $newHTML.clone().find("img").remove().end();

                body = $newHTML.html();
            }
            else {
                $newHTML = $('#divGroceryDepart');
                $newHTML1 = $('#divAdditionalDepart');
                $newHTML1 = $newHTML1.clone().find("img").remove().end();
                $newHTML = $newHTML.clone().find("img").remove().end();

                body = $newHTML1.html() + $newHTML.html();
            }

            $.ajax({
                type: "POST",
                url: "PIMService.asmx/PlanItMealSendEmail",
                data: "{'body':'" + body + "','emailsend':'" + email + "','subject':'[PlanItMeal]GROCERY LIST'}",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (response) {
                    alert('Email is sent, please check your email to view detail!');
                    $("#<%=txtEmail.ClientID%>").val('');
                    $("div.close").click();
                },
                error: function (response) {
                }
            });
            return false;

        }

        function searchKeyPress() {
            if ($.browser.msie) {
                $('#btnDelete').css('display', 'none');
            }
            else {
                if ($('.suggest').val().length > 0) {
                    $('#btnDelete').css('display', 'inherit');
                } else {
                    $('#btnDelete').css('display', 'none');
                }
            }
        }

        function deleteTextSearch() {
            $('.suggest').val('');
            $('#btnDelete').css('display', 'none');
        }

        function GetURLParameter(sParam) {
            var sPageURL = window.location.search.substring(1);
            var sURLVariables = sPageURL.split('&');
            for (var i = 0; i < sURLVariables.length; i++) {
                var sParameterName = sURLVariables[i].split('=');
                if (sParameterName[0] == sParam) {
                    return sParameterName[1];
                }
            }
        }

        function GetIngredientName() {
            if (document.getElementById('hdRecipeId').value != '') {
                document.getElementById("<% =hdIngredientName.ClientID %>").value = document.getElementById('hdShare').value;
                document.getElementById("<% =RecipeId.ClientID %>").value = document.getElementById('hdRecipeId').value;
                window.open('SendEmail.aspx?recipeid=' + document.getElementById('hdRecipeId').value + '&type=1&AddIngredient=' + document.getElementById('hdAddingredient').value + '&rmingr=' + ingredientCheck, '_blank');119114311
                return false;
            }
            else {
                alert('In order to send email, please chonse recipe name');
                return false;
            }
        }
    </script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="Server">
    <div id="contentarea" onmouseover="initRating();">
        <div id="content" class="clearfix">
            <div class="box01 clearfix">
                <ul class="ul01">
                    <li class="li01"><a>
                        <img src="images/btn01.jpg" alt="GROCERY LIST" width="160" height="30" /></a></li>
                    <!--li class="li01"><a href="#"><img src="images/btn02.jpg" alt="MEAL PLAN" width="127" height="30" /></a></li-->
                </ul>
                <div class="search_bg">
                    <div class="txt_box" style="width: 250px">
                        <input name="search" class="suggest searchText" style="width: 98%" onkeyup="searchKeyPress();" id="inPutSearch" placeholder="Meal plan name" runat="server"
                            autocomplete="on" type="text" value="" size="30" />
                    </div>
                    <div class="btn_search">
                        <img alt="Search" id="btnDelete" style="display:none" onclick="deleteTextSearch(); return false;" src="images/facetClose.png" />
                    </div>
                    <div class="btn_search">
                        <img alt="Search" id="imgSearch" src="images/btn_search.jpg" />
                    </div>
                </div>
            </div>
            <div id="loading" ><img src="images/ajax-loader.gif" /></div>
            <div class="box02 clearfix" onmouseover="initRating();">
                <div id="leftpanel" class="alpha clearfix">
                    <%--<ul class="ul02">
                    </ul>--%>
                </div>
                <div id="rightpanel" class="beta clearfix">
                    <div class="grocerypanel clearfix" style="border-left: 1px; display: none">
                        <div class="clearfix mar_b10">
                            <p class="title03">
                                Grocery List</p>
                            <p class="btn_close">
                                <img src="images/btn_close.jpg" alt="" width="32" height="32" /></p>
                        </div>
                        <div class="clearfix clear mar_b10">
                            <div class="clearfix">
                                <div class="txt02">
                                    <p>
                                        Serving Size:</p>
                                </div>
                                <div class="txt_bg01">
                                    <%--<input name="Serving size" id="txtServing" type="text" size="10" />--%>
                                    <select id="txtServing" style="width: 100px" onchange="changeServing();">
                                        <option value=""></option>
                                        <option value="1">1</option>
                                        <option value="2">2</option>
                                        <option value="3">3</option>
                                        <option value="4">4</option>
                                        <option value="5">5</option>
                                        <option value="6">6</option>
                                        <option value="7">7</option>
                                        <option value="8">8</option>
                                        <option value="9">9</option>
                                        <option value="10">10</option>
                                        <option value="11">11</option>
                                        <option value="12">12</option>
                                        <option value="13">13</option>
                                        <option value="14">14</option>
                                        <option value="15">15</option>
                                        <option value="16">16</option>
                                        <option value="17">17</option>
                                        <option value="18">18</option>
                                        <option value="19">19</option>
                                        <option value="20">20</option>
                                    </select>
                                </div>
                            </div>
                            <div class="clearfix" style="margin-top:10px;">
                                <div class="">
                                    <input name="additional" type="text" placeholder="Additional"  class="input1" style="width:210px"  id="txtAdditional" />
                                    <button onclick="return AddAdditional();" class="button-form" >Add</button>
                                </div>
                            </div>
                        </div>
                        <div class="clearfix clear mar_b04">
                            <div class="left01">
                                <a id="shareButton">
                                    <img src="images/img02.jpg" alt="Share" width="24" height="24" /></a>
                                <div class="share">
                                    <div id="shareContainer">
                                        <div style="clear: both">
                                        </div>
                                        <div style="display: none;" id="shareBox">
                                            <div id="shareForm">
                                                <fieldset id="body">
                                                    <div id="divIngredientPrint" class="popup_print">
                                                    </div>
                                                    <div class="textcenter">
                                                        <img id="img_print" style="float: left; cursor: pointer;" onmouseover="javascript:SetHtmlToPrint();"
                                                            src="images/icon_print.png" alt="Recipe view" title="Recipe View" width="30"
                                                            height="30"></img>
                                                        Print
                                                    </div>
                                                    <div class="textcenter" style="display:none">
                                                        <a id="lnkFacebook" class="fbook" target="_blank">
                                                            <asp:ImageButton src="images/icon-fb.png" class='imgShareFb' ID="imgShare" runat="server"
                                                                OnClick="imgShare_Click" OnClientClick="javascript:GetIngredientName()" Width="30"
                                                                alt="" Height="30" title="Share Facebook" />
                                                        </a>Share Facebook
                                                    </div>
                                                    <div class="textcenter">
                                                        <a href="#" class="topopup">
                                                            <img id="img_send" style="float: left; cursor: pointer;" src="images/email.jpg" class="imgIcon2" />
                                                        </a>Send email
                                                    </div>
                                                    <div id="dialog-form" style="height:400px; width:450px; display:none" title="Print">
                                                        <div id="divIngredientPrintDepart"></div>
                                                    </div>
                                                    <div id="toPopup">
                                                        <div class="close">
                                                        </div>
                                                        <span class="ecs_tooltip">Press Esc to close <span class="arrow"></span></span>
                                                        <div id="popup_content">
                                                            <div class="ip-text">
                                                                <asp:TextBox ID="txtEmail" runat="server" CssClass="input-trpr" placeholder="Email"
                                                                    Width="98%"></asp:TextBox>
                                                            </div>
                                                            <asp:RegularExpressionValidator ID="RegularExpressionValidator1" runat="server" ValidationExpression="\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*"
                                                                ControlToValidate="txtEmail" ErrorMessage="Please input invalid email address."
                                                                CssClass="errormsg">  
                                                            </asp:RegularExpressionValidator>
                                                        </div>
                                                        <div style="text-align: center; margin-bottom: 10px;">
                                                            <asp:Button ID="btnSend" runat="server" OnClientClick="return SendEmail();" class="button-form" Text="Send"/>
                                                        </div>
                                                    </div>
                                                </fieldset>
                                            </div>
                                        </div>
                                    </div>
                                    <div style="clear: both">
                                    </div>
                                </div>
                            </div>
                            <div class="right01">
                                <ul class="ul_radio">
                                    <li>
                                        <input id="chkRecipeView" type="radio" name="radio" /></li>
                                    <li>Recipe View</li>
                                    <li>
                                        <input id="chkDepartView" name="radio" type="radio" checked="checked" />
                                    </li>
                                    <li>Department View</li>
                                    <li id="btn_clear">Clear</li>
                                </ul>
                            </div>
                        </div>
                       <%-- <div class="clearfix mar_b10 clear">
                            <p class="img_r">
                                <img id="btn_clear" src="images/btn_clear.jpg" alt="Clear" width="58" height="30" /></p>
                        </div>--%>
                    </div>
                    <hr />
                    <div class="clearfix clear">
                        <div id="grocery" class="GroceryMealPlan" style="height: 1800px; width:100%; float:left; overflow:auto;">
                            <div class='clearfix clear' style='width:100%' id='divGrocery'>
                                <div class='clearfix clear' style='width:100%; display:none' id='divGroceryRecipe'>
                                    <div class='divMessage'>Click +</br> or</br> drag a recipe here</div>
                                </div>
                                <div class='clearfix clear' style='width:100%; display: inherit' id='divAdditionalDepart'></div>
                                <div class='clearfix clear' style='width:100%; display:inherit' id='divGroceryDepart'>
                                    <div class='divMessage'>Click +</br> or</br> drag a recipe here</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <input id="hdShare" type="hidden" value="" />
            <input id="hdRecipeId" type="hidden" value="" />
            <input id="hdIngredientDepart" type="hidden" value="" />
            <input id="hdAddingredient" type="hidden" value="" />

            <asp:HiddenField ID="RecipeId" runat="server"></asp:HiddenField>
            <asp:HiddenField ID="hdIngredientName" runat="server"></asp:HiddenField>
            <div id="bg" style="visibility: visible" class="popup_bg">
            </div>
        </div>
    </div>

    <div id="dialog-message" style="display:none" title="Load data">
        <p>
            <span class="ui-icon ui-icon-circle-check" style="float: left; margin: 0 7px 50px 0;">
            </span>Your search does not have any matches.
        </p>
        <p>
            <b>Suggestion:</b>
        </p>
        <p>
            Try different keywords
        </p>
    </div>

    <script type="text/javascript">
        function initRating() {
            var userid = '<%=Session["Userid"]%>';
            if (userid != "") {
                $(".basic").jRating({
                    bigStarsPath: 'jquery/icons/stars.png',
                    step: true,
                    length: 5,
                    decimalLength: 0,
                    onSuccess: function (element, rate) {

                    },
                    onError: function () {
                        alert('Error : please retry');
                    }
                });
            } else {
                $(".basic").jRating({
                    bigStarsPath: 'jquery/icons/stars.png',
                    isDisabled: true
                });

            }
        }
        
    </script>
</asp:Content>
